<template>
  <section class="bbs_section">
    <span class="title">{{category.title}}</span>
    <ul class="card_wrap" v-if="cardList.length">
      <li
        v-for="item in cardList" 
        :key="item.id"
        @click='goToPage(item.id)'>
        <div class="comm_title">
          {{item.title}}
        </div>
        <div class="author_wrap">
          <div class="author"><span>{{item.created_by}}</span></div>
          <div class="timer">{{GLOBAL.timestampToTime(item.created_at)}}</div>
          <div class="comm">{{item.commentCount}}评论</div>
        </div>
      </li>
    </ul>
    <div v-else>暂无帖子</div>
    <div class="load_more"
      @click="loadMore" v-if="path !='list'">
      <span>{{cardList.length?'查看更多':'发表帖子'}}</span>
    </div>
    <el-pagination
      v-else
      background
      @current-change = "changeCurrent"
      layout="prev, pager, next"
      :page-count="pagination.page_count">
    </el-pagination>
  </section>
</template>
<script>
import axios from 'axios'
export default {
  props:['category'],
  data(){
    return{
      cardList:[],//帖子列表
      path:this.$route.name,
      pagination:{
        page_count:0,
      }
    }
  },
  mounted(){
    //获取板块中最新帖子  
    if (this.category.tag==0) {
      this.getCurrentList('ftopics/new_top10')
    }else{
      this.getCurrentList()
    }
  },
  methods:{
    goToPage(id){
      this.$router.push({ path: '/info', query: { id }})
    },
    loadMore(){
      if(!this.cardList.length){
        this.$router.push({path:'/cont',query:{plate:this.category.id}})//发帖
      }else{
        this.$router.push({name:'list',query:{id:this.category.id, },params:{t:this.category.title}})//去列表
      }
    },
    getCurrentList(page=0,url='ftopics/c_list'){//获取帖子列表 page当前页
      this.GLOBAL.request({
        baseURL:this.GLOBAL.API_RNTY_URL,
        url,
        param:{
          cid:this.category.id,
          page,
          total:10,
        }
      }).then(({data:data})=>{
        this.cardList = data.data;
        this.pagination = data.pagination;
      })
    },
    changeCurrent(currentPage){
      this.getCurrentList(currentPage-1)
    }
  }
}
</script>
<style>
.bbs_section{
  width:1000px;
  margin:36px auto;
  border:4px solid #74c9ff;
  padding:12px 10px;
  box-sizing: border-box;
  border-radius: 0 6px 6px 6px ;
  position: relative;
}
.bbs_section .title{
  position: absolute;
  top:-30px;
  left:-4px;
  font-size: 18px;
  line-height: 30px;
  height:30px;
  padding: 0 15px;
  border-radius: 3px 3px 0 0 ;
  font-weight: bold;
  color:#fff;
  background-color:#74c9ff; 
}
.card_wrap ul{
  padding:15px;
}
.card_wrap li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:60px;
  font:18px/30px "微软雅黑";
  color:#666;
  cursor: pointer;
  border-bottom:1px solid #bbb;
}
.load_more{
  margin-top:20px;
  text-align: right;
}
.load_more span{
  background-color: #74c9ff;
  color:#fff;
  padding: 0 10px;
  border-radius: 5px;
  font:18px/26px "微软雅黑";
  cursor: pointer;
}
.comm_title{
  width:600px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.card_wrap .author_wrap{
  display: flex;
  justify-content: space-between;
  width:330px;
}
.card_wrap .author_wrap div{
  position: relative;
  font:14px/16px "微软雅黑";
  color:#666;
}
.card_wrap .author_wrap div::after{
  position: absolute;
  top:0;
  left:-20px;
}
.card_wrap .author_wrap .author::after{
  content: url('../assets/images/author.png');
}
.card_wrap .author_wrap .timer::after{
  content: url('../assets/images/timer.png');
}
.card_wrap .author_wrap .comm::after{
  content: url('../assets/images/comm.png');
}
.card_wrap .author span{
  display: block;
  width:100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

